<template>
    <div class="container">
        <div ref="main" style="width: 404px;height:600px;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts';

    export default {
        data(){
            return{
                datalist:[

                ],
                countlist:[
                    {value: 4, name: '标准票'},
                    {value: 2, name: '儿童票'},
                    {value: 1, name: '学生票'},
                    {value: 1, name: '旅游团体票'},
                    {value: 3, name: '车辆进出票'},
                    {value: 0, name: '优惠票'},
                    {value: 0, name: '赠票'}
                ]
            }
        },
        created(){
            this.getDatalist();
        },
        mounted(){
            this.draw();
        },
        methods:{
            getDatalist(){
                this.$http.get('DataList').then(result=>{
                    this.datalist = result.body;
                    this.datalist.forEach(item => {
                        if(item.ticket_typeid == 81) {
                            this.countlist[0].value = 1;
                        }
                    });
                })
            },
            draw(){
                var myChart = echarts.init(this.$refs.main);
                option = {
                    title: {
                        text: '园区购票数据情况',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['标准票', '儿童票', '学生票', '旅游团体票', '车辆进出票', '优惠票', '赠票']
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data: this.countlist,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option, true);
            }
        }
    }

</script>

<style scoped>
    .container{
        margin:5px;
    }
</style>
